import React, { useEffect, useState } from "react";
import { Sidebar, Flex, Image } from "react-vant";
import axios from 'axios'
interface FMItemState {
  title: string;
  id: string;
  children: {
    title: string;
    url: string;
    id: string;
  }[];
}

export const FM = () => {
  const [list, setList] = useState<FMItemState[]>([]);

	useEffect(() => {
		(async () => {
			const resp = await axios.get('/api/fm/data');
			setList(resp.data.data)
		})()
	}, [])

  return (
    <div>
      <Sidebar>
				{
					list.map((v) => {
						return (
							<Sidebar.Item title={v.title} key={v.id}>
								<Flex wrap="wrap">
									{
										v.children.map(v => {
											return (
												<Flex.Item span={8} key={v.id} style={{ padding: 10 }}>
													<Image src={v.url} alt="" width="100%" lazyload/>
													<h3>{ v.title }</h3>
												</Flex.Item>
											)
										})
									}
								</Flex>
							</Sidebar.Item>
						)
					})
				}
      </Sidebar>
    </div>
  );
};
